<template>
    <div class="centerbox">
        <div class="centertop">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-youxiang"></use>
            </svg>
        </div>
        <div class="centerhead">
            <div class="tou">
                <div class="touimg">
                    <img src="../other/logo.png" alt="">
                </div>
                <span>{{myname}}</span>
            </div>
        </div>
        <div class="centercenter">
            <div class="centerleft">
                <p>签到</p>
                <span>每日打卡</span>
            </div>
            <div class="centerleft">
                <p>笔记</p>
                <span>我的笔记</span>
            </div>
        </div>
        <ul class="centerdown">
            <li>
                <router-link to="/index">
                    <div class="centersvg">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-kefufenxiermaikefu"></use>
                        </svg>
                    </div>
                    <span>在线客服</span>
                    <span class="centerdw">›</span>
                </router-link>
            </li>
            <li>
                <router-link to="/setup">
                    <div class="centersvg">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shezhi"></use>
                        </svg>
                    </div>
                    <span>设置</span>
                    <span class="centerdw">›</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"center",
    data(){
        return{
            myname:'',
        }
    },
    created(){
        this.$store.commit('changenavshow', true)
        this.myname = localStorage.getItem('_token')
    },
    beforeRouteEnter(to,from,next){
        let _token = localStorage.getItem('_token')
        if(_token == null){
            next({path:'/login'});// 跳转登录
        }
        else {
            next();// 进入个人中心
        }
    },
}
</script>
<style lang="less">
@import '../other/all.less';
.centerbox{
    width: 100%;
    height:100%;
}
.centertop{
    text-align: right;
    svg{
        color:@allcolor1;
        font-size:0.8rem;
        margin-right:0.5rem;
    }
}
.centerhead{
    width: 100%;
    margin-top:50px;
    .tou{
        display:flex;
        justify-content: left;
        .touimg{
            width: 2rem;
            height:2rem;
            margin-left:20px;
            border-radius: 50%;
            overflow: hidden;
            border:1px solid #ccc;
            margin-right:20px ;
            img{
                width: 2rem;
            }
        }
        span{
            width:55%;
            line-height:2rem;
            font-size: 0.6rem;
            color:@allcolor5;
            text-align: left;
            // font-weight: bolder;
        }
    }
}
.centercenter{
    display:flex;
    justify-content: center;
    width: 90%;
    margin: 20px auto 0px;
    position: relative;
    box-shadow: 0rem 0.1em 0.1rem #eee;
    &::after{
        content:'';
        width: 2px;
        height:50px;
        background-color: #eee;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    div{
        width: 50%;
        color:@allcolor5;
        font-size: 0.5rem;
        // border:1px solid black;
        p{
            margin-bottom: 0px;
        }
        span{
            font-size: 0.3rem;
            display:inline-block;
            margin-bottom: 20px;
            color:@allcolor1;
        }
    }
}
.centerdown{
    width: 90%;
    // height:50px;
    // border: 1px solid black;
    margin:30px auto;
    // display:flex;
    li{
        width: 100%;
        padding:10px;
        box-sizing: border-box;
        position: relative;
        a{
            display:flex;

        }
        .centersvg{
            margin-top:3px;
            svg{
                font-size:0.5rem;
                color:@allcolor1;
            }
        }
        span{
            color:@allcolor1;
            font-size: 0.5rem;
            line-height:1rem;
            padding-left:10px;
        }
        .centerdw{
            position: absolute;
            top: 15%;
            right:5%;
            color:@allcolor1;
        }
    }
}
</style>